<template>
  <div class="page">
    <div class="pv_box">
      <!-- 
          @mousedown="clickKey(x - 1, y - 1, 'down')"
            @mouseup="clickKey(x - 1, y - 1, 'up')"
       -->
      <template v-for="(y, yidx) in formData.y">
        <div :key="yidx + 'row'" class="pv_row">
          <div
            v-for="(x, xidx) in formData.x"
            class="pv_box_item"
            :style="style"
            :key="yidx + '_' + xidx"
            @touchstart="clickKey(x - 1, y - 1, 'down')"
            @touchcancel="clickKey(x - 1, y - 1, 'up')"
            @touchend="clickKey(x - 1, y - 1, 'up')"
          >
            {{ getKey(x - 1, y - 1).name }}
          </div>
        </div>
      </template>
    </div>
    <v-btn
      v-if="canfull"
      class="full_btn"
      :class="full ? 'active' : ''"
      @click="fullScreen"
      >全屏开关</v-btn
    >
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import axios from "axios";
import { getApi } from "@/utils/Apibase";
import screenfull from "screenfull";
@Component({
  components: {},
})
export default class Home extends Vue {
  formData: any = [];
  async keyTap(val: string, mode: any) {
    let data = await axios.get(getApi("keytap"), {
      params: { key: val },
    });
  }
  async keyToggle(val: string, mode: any) {
    let data = await axios.get(getApi("keytoggle"), {
      params: { key: val, mode },
    });
  }
  get style() {
    let sizeX = 100 / this.formData.x;
    let sizeY = 100 / (this.formData.y + 1);
    let style = {
      width: sizeX + "vw",
      height: sizeY + "vh",
      lineHeight: sizeY + "vh",
    };

    return style;
  }
  getKey(x: any, y: any) {
    let data = this.formData.data;
    let key = `${x},${y}`;
    if (data[key]) {
      return data[key];
    } else {
      return {};
    }
  }
  clickKey(x: any, y: any, mode: any) {
    let data = this.getKey(x, y);
    // this.keyTap(data.val);
    if(!data.val) return
    this.keyToggle(data.val, mode);
    if ("vibrate" in window.navigator && mode == "down") {
      window.navigator.vibrate(50); 
      // window.navigator.vibrate([200, 100, 200]); // 震动200停100再震动200，和qq的消息震动一样
    }
  }
  canfull = true;
  full = false;
  fullScreen() {
    if (!screenfull.isEnabled) {
      this.canfull = false;
    }
    screenfull.toggle();
    this.full = !this.full;
  }

  async created() {
    let name = this.$route.query.name;
    if (name) {
      let req = await axios.get(getApi("getKeyMapData"), {
        params: { name },
      });
      if (req.data) {
        this.formData = req.data;
      }
    }
  }
}
</script>
<style lang="scss" scope="this api replaced by slot-scope in 2.5.0+">
.pv_box {
  user-select: none;
  .pv_row {
    display: flex;
    .pv_box_item {
      width: 100px;
      height: 100px;
      line-height: 100px;
      text-align: center;
      border: 1px solid #000;
      font-size: 16px;
    }
  }
}
.keys {
  background: rgb(207, 207, 207);
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  flex-wrap: wrap;
  .key_item {
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
    border: 1px solid #000;
  }
}
.full_btn {
  margin-top: 10px;
  width: 100%;
  &.active {
    position: absolute;
    bottom: 0;
  }
}
</style>